<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OCR with Local Chinese Language</title>
  <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.2/dist/tesseract.min.js"></script>
</head>
<body>

  <input type="file" id="imageInput" accept="image/*">
  <div id="output"></div>
  <div id="status"></div>

  <script>
    document.getElementById('imageInput').addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const img = new Image();
          img.src = e.target.result;
          img.onload = function () {
            Tesseract.recognize(
              img.src,
              'chi_sim', // 简体中文
              {
                langPath: './assets/tesseract', // 指定语言包的本地路径
                gzip: false,
                logger: m => {
                  document.getElementById('status').innerText = `Progress: ${Math.round(m.progress * 100)}% - ${m.status}`;
                }
              }
            ).then(({ data: { text } }) => {
              document.getElementById('output').innerText = text;
              document.getElementById('status').innerText = "完成!";
            });
          };
        };
        reader.readAsDataURL(file);
      }
    });
  </script>

</body>
</html>